<template>
	<view>
		<!-- 搜索框 -->
		<block>
			<view class="nav-search">
				<search @onsearch="search_button_event" :propIsOnEvent="true" :propIsRequired="false"
					propPlaceholder="输入名称搜索"></search>
			</view>
		</block>

		<!-- 分类内容 -->
		<view style="position: relative; box-sizing: border-box;" class="category-content">
			<!-- 一级导航 -->
			<view class="left-nav" style="background-color: #fff; height: 100%">
				<scroll-view :scroll-y="true" style="height: 100%">
					<view style="font-size: 28rpx;text-align: center;"
						:class="'item oh cr-base' + (category_index == -1 ? 'nav-active cr-main border-color-main' : '')"
						:data-index="-1" :data-itemtwoindex="-1" @tap="nav_event">
						<text>优惠卡项</text>
					</view>
					<view v-for="(item, index) in category_data" :key="index">
						<view style="font-size: 28rpx;text-align: center;"
							:class="'item oh cr-base' + (category_index == index ? 'nav-active cr-main border-color-main' : '')"
							:data-index="index" :data-itemtwoindex="-1" @tap="nav_event">
							<text>{{item?.info?.ccName}}</text>
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 商品列表 -->
			<view class="goods-right-content padding-horizontal-main"
				style="position: absolute;box-sizing: border-box;">
				<scroll-view :scroll-y="true" style="height: 100%;" class="goods-list" :scroll-top="scroll_top"
					@scroll="scroll_event" @scrolltolower="scroll_lower" lower-threshold="30">
					<view style="position: relative;">
						<!-- 二级导航 -->
						<view class="word-list scroll-view-horizontal">
							<scroll-view :scroll-x="true">
								<block v-if="category_content != null && category_content?.length > 0">
									<block v-for="(item, index) in category_content" :key="index">
										<view style="font-size: 28rpx; padding: 5rpx;"
											:class="'word-icon dis-inline-block round '+(category_two_index == index ? 'bg-main-light br-main cr-main' : 'br-gray cr-gray')"
											:data-index="category_index" :data-itemtwoindex="index" @tap="nav_event">
											{{item?.info?.ccName}}
										</view>
									</block>
								</block>
							</scroll-view>
						</view>
						<!-- 右侧商品列表 -->
						<view class="oh">
							<block v-if="commodity_list?.length > 0">
								<view style="overflow: hidden; padding: 15rpx 15rpx 20rpx 15rpx;">
									<view
										style="width: 33%; border-bottom: 1px dashed #f6c133; float: left; margin-top: 12px;">
									</view>
									<view style="font-size: 30rpx;float: left;text-align: center;margin-left: 28rpx;">
										{{'商品清单'}}
									</view>
									<view
										style="width: 33%;border-bottom: 1px dashed #f6c133;float: right;margin-top: 11px;">
									</view>
								</view>

								<view v-for="(item, index) in commodity_list" :key="index"
									class="item bg-white border-radius-main oh pr spacing-mb">
									<view :data-value="'/pages/daily/commodity_detail?ciUuid='+item.ciUuid"
										@tap="url_event">
										<image
											:src="organizationGateway + '/file/download?filepath=' + item?.info?.ciPict[0]?.path"
											mode="widthFix" class="goods-img radius fl"></image>
										<view class="goods-base padding-top-sm padding-right-sm fr">
											<view class="goods-base-content">
												<view class="goods-title multi-text" style="font-size: 26rpx;">
													{{item?.info?.ciAlna}}
												</view>
												<view v-if="(item?.info?.ciDesc || null) != null"
													style="font-size: 22rpx; margin-top: 10rpx;"
													class="simple-desc cr-red single-text">{{item?.info?.ciDesc}}</view>
												<view style="font-size: 22rpx; padding-top: 5rpx;">
													{{"单位：" + item?.info?.ciUnit}}
												</view>
											</view>
											<view class="oh" style="margin-top: 10rpx;">
												<view class="sales-price pa single-text" style="font-size: 26rpx;">
													{{"￥" + numberFormat(item?.ocPric, 2)}}
												</view>
												<view class="buy-opt tc pa">
													<block v-if="(item.ocQuat || 0) > 0">
														<view class="buy-number dis-inline-block cr-base va-m"
															style="font-size: 26rpx; padding-left: 5rpx;">
															{{"余：" + item?.ocQuat + item?.info?.ciUnit}}
														</view>
													</block>
													<block v-else>
														<text class="cr-grey text-size-xs">没货了</text>
													</block>
												</view>
											</view>
										</view>
									</view>
								</view>
							</block>


							<block v-if="service_list?.length > 0">
								<view style="overflow: hidden; padding: 15rpx 15rpx 20rpx 15rpx;">
									<view
										style="width: 33%; border-bottom: 1px dashed #f6c133; float: left; margin-top: 12px;">
									</view>
									<view style="font-size: 30rpx;float: left;text-align: center;margin-left: 28rpx;">
										{{'服务清单'}}
									</view>
									<view
										style="width: 33%;border-bottom: 1px dashed #f6c133;float: right;margin-top: 11px;">
									</view>
								</view>

								<view v-for="(item, index) in service_list" :key="index"
									class="item bg-white border-radius-main oh pr spacing-mb">
									<view :data-value="'/pages/daily/service_detail?siUuid='+item.siUuid"
										@tap="url_event">
										<image
											:src="item?.info?.siPict ? organizationGateway + '/file/download?filepath=' + item?.info?.siPict[0]?.path : ''"
											mode="widthFix" class="goods-img radius fl"></image>
										<view class="goods-base padding-top-sm padding-right-sm fr">
											<view class="goods-base-content">
												<view class="goods-title multi-text" style="font-size: 26rpx;">
													{{item?.info?.siName}}
												</view>
												<view v-if="(item?.info?.siCont || null) != null"
													style="font-size: 22rpx; margin-top: 10rpx;"
													class="simple-desc cr-red single-text">{{item?.info?.siCont}}</view>
												<view style="font-size: 22rpx; padding-top: 5rpx;">
													{{"单位：" + item?.info?.siUnsu + item?.info?.siUnit}}
												</view>
											</view>
											<view class="oh" style="margin-top: 10rpx;">
												<view class="sales-price pa single-text" style="font-size: 26rpx;">
													{{"￥" + numberFormat(item?.ocPric, 2)}}
												</view>
												<view class="buy-opt tc pa">
													<block v-if="(item.ocQuat || 0) > 0">
														<view class="buy-number dis-inline-block cr-base va-m"
															style="font-size: 26rpx; padding-left: 5rpx;">
															{{"余：" + item?.ocQuat + item?.info?.siUnit}}
														</view>
													</block>
												</view>
											</view>
										</view>
									</view>
								</view>
							</block>

							<block v-if="discount_list?.length > 0">
								<view v-for="(item, index) in discount_list" :key="index"
									class="bg-white border-radius-main oh pr spacing-mb">
									<view :data-value="'/pages/daily/discount_detail?dpUuid=' + item.dpUuid"
										@tap="url_event">
										<image
											:src="item?.card?.dcPrph ? organizationGateway + '/file/download?filepath=' + item?.card?.dcPrph[0]?.path : ''"
											mode="widthFix" class="goods-img radius fl"></image>
										<view class="goods-base padding-top-sm padding-right-sm fr">
											<view class="goods-base-content">
												<view class="goods-title multi-text"
													style="font-size: 26rpx; padding-top: 10rpx;">{{item?.dpName}}
												</view>
												<view v-if="(item?.dpRemk || null) != null"
													style="font-size: 22rpx; margin-top: 10rpx;"
													class="simple-desc cr-red single-text">{{item?.dpRemk}}</view>
											</view>
											<view class="oh" style="margin-top: 10rpx;">
												<view class="sales-price pa single-text" style="font-size: 26rpx;">
													{{"￥" + numberFormat(item?.prprice, 2)}}
												</view>
												<view class="buy-opt tc pa">
													<block v-if="(item?.card?.dcQuan || 0) > 0">
														<view class="buy-number dis-inline-block cr-base va-m"
															style="font-size: 26rpx; padding-left: 5rpx;">
															{{"余：" + item?.card?.dcQuan}}
														</view>
													</block>
												</view>
											</view>
										</view>
									</view>
								</view>
							</block>

						</view>
					</view>
				</scroll-view>
			</view>


		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		getDailyCategoryPage
	} from "../../utils/api.js"

	export default {
		data() {
			return {
				category_data: [],
				category_index: -1,
				category_two_index: 0,
				category_two_content: null,
				category_content: null,
				commodity_data: [],
				service_data: [],
				commodity_list: [],
				service_list: [],
				discount: [],
				discount_list: [],
				card_index: -1,
				card_content: null,
			}
		},
		onLoad(params) {
			if (this.orUuid) {
				this.getDailyCategoryPage()
			}
		},
		computed: {
			...mapGetters({
				appid: "globalInfo/appid",
				organizationGateway: "globalInfo/organizationGateway",
				globalUserInfo: "personInfo/userInfo",
				orUuid: "dailyInfo/orUuid",
				cartInfo: "dailyInfo/cartInfo",
			}),
		},
		methods: {
			async getDailyCategoryPage() {
				let res = await getDailyCategoryPage(this.orUuid);
				if (res) {
					let category = this.transTree(res.category, "ccUuid", "ccPaid")
					this.category_data = category
					this.commodity_data = res.commodity
					this.service_data = res.service
					this.discount = res.discount
					this.discount_list = res.discount
				}
			},

			transTree(data_list, id, parentID, children = "items") {
				let result = [],
					temp = {},
					len = data_list?.length;
				for (var i = 0; i < len; i++) {
					// 以id作为索引存储元素
					temp[data_list[i][id]] = data_list[i];
				}
				for (let j = 0; j < len; j++) {
					let currentElement = data_list[j]
					let tempCurrentElementParent = temp[currentElement[parentID]];
					if (tempCurrentElementParent) {
						if (!tempCurrentElementParent[children]) {
							// 设父元素的children键
							tempCurrentElementParent[children] = [];
						}
						tempCurrentElementParent[children].push(currentElement)
					} else {
						result.push(currentElement)
					}
				}
				return result
			},

			search_button_event(e) {
				let commodityData = this.commodity_data.filter(item => item?.info?.ciName.indexOf(e) != -1)
				let serviceData = this.service_data.filter(item => item?.info?.siName.indexOf(e) != -1)
				this.commodity_list = commodityData
				this.service_list = serviceData
				this.category_index = -2
				this.discount_list = [],
					this.category_content = null
			},

			// 导航事件
			nav_event(e) {
				let index = e.currentTarget.dataset.index;
				let two_index = e.currentTarget.dataset.itemtwoindex;
				this.category_index = index;
				this.category_two_index = two_index;
				let category_content = null

				if (index != -1) {
					this.discount_list = []
					category_content = this.category_data[index]['items'] || null;
					this.category_content = category_content;

					let commodity = this.commodity_data.filter(item => item.ccFiid === this.category_data[index]?.ccUuid)
					this.commodity_list = commodity

					let service = this.service_data.filter(item => item.ccFiid === this.category_data[index]?.ccUuid)
					this.service_list = service
				} else {
					this.commodity_list = []
					this.service_list = []
					this.category_content = null
					this.discount_list = this.discount
				}

				if (two_index != -1 && category_content != null) {
					this.discount_list = []
					let commodity = this.commodity_data.filter(item => item.ccSeid === category_content[two_index]?.ccUuid)
					this.commodity_list = commodity

					let service = this.service_data.filter(item => item.ccSeid === category_content[two_index]?.ccUuid)
					this.service_list = service
				}
			},

			url_event(e) {
				let value = e.currentTarget.dataset.value || null;
				if (value) {
					uni.navigateTo({
						url: value
					});
				}
			}
		}
	}
</script>

<style>
	.nav-search {
		padding-bottom: 10px;
	}

	.category-content {
		height: calc(100vh - 68px);
	}

	/**
* 左侧导航
*/
	.left-nav {
		width: 200rpx;
	}

	.left-nav .item {
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 10rpx;
		border-left: 3px solid #fff;
		border-right: 3px solid #fff;
	}

	.left-nav .item:not(:last-child) {
		border-bottom: 1px solid #f1f1f1 !important;
	}

	.nav-active {
		background: #f5f5f5;
		border-width: 0 0 0 3px;
		border-right: 3px solid #f5f5f5 !important;
		font-weight: bold;
	}


	/**
 * 右侧商品列表模式
 */
	.goods-right-content {
		width: calc(100% - 200rpx);
		height: 100%;
		top: 0;
		right: 0;
		background: #f5f5f5;
	}

	.goods-right-content .word-list {
		position: sticky;
		top: 0;
		right: 0;
		background: #f5f5f5;
		z-index: 1;
		padding: 0px 1px 20rpx 1px;
	}

	.goods-list .goods-img {
		width: 190rpx;
		height: 190rpx !important;
		border-top-right-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
	}

	.goods-list .goods-base {
		width: calc(100% - 220rpx);
	}

	.goods-list .goods-base-content {
		min-height: 100rpx;
	}

	.goods-list .goods-base .simple-desc {
		line-height: 20rpx;
		min-height: 25rpx;
		max-height: 50rpx;
	}

	.goods-list .goods-base .sales-price {
		width: calc(100% - 320rpx);
		left: 210rpx;
		bottom: 10rpx;
	}

	.goods-list .goods-base .buy-opt {
		right: 10rpx;
		bottom: 6rpx;
	}

	.goods-list .goods-base .buy-number {
		min-width: 32rpx;
	}
</style>
